すたすた式
Blogger QooQ
QooQver1.31のBlog widgetをversion1からversion2に変更したときの個人的メモです。
準備編
その他widget編
資料編
Blog widgetが作業対象です。
作業量が多く、v2のincludableタグ生成などを行います。
includable
あくまで実験的なものです。本番環境での使用は想定していません。
当面の理解のうえで試してみたらこうなったという水準です。正確性はないので留意してください。
もし試す場合は、ぜひ開発用ブログを作成して試してください。
Blog widgetのincludableタグに対して以下を行いました。
残したままでも問題ないと思いますが、以下の条件で元テンプレートのincludableタグを削除しました。
<b:includable id='backlinkDeleteIcon' var='backlink'/> <b:includable id='backlinks' var='post'/> <b:includable id='comment_count_picker' var='post'> ~ </b:includable> <b:includable id='mobile-index-post' var='post'> ~ </b:includable> <b:includable id='mobile-main' var='top'> ~ </b:includable> <b:includable id='mobile-nextprev'> ~ </b:includable> <b:includable id='mobile-post' var='post'> ~ </b:includable> <b:includable id='postQuickEdit' var='post'> ~ </b:includable>
Les inclusions XML dépréciées - Blogger Code PE
以下の順番で作業
置き換え用のv2のincludableタグを生成します。
管理画面「テーマ」「カスタマイズ▼」「HTMLの編集」画面に下記をコピペして「保存」
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3'> <head> <b:comment> <b:skin/> </b:comment> </head> <body> <b:section id="main"> <b:widget id="Blog1" title="" type="Blog"/> </b:section> </body> </html>
下記id名の元テンプレートのincludableタグと、 対応するv2のincludableタグを置き換えます。
commentDeleteIcon iframeComments threadedCommentJsは置き換えずにタグを閉じてもいいかもしれません。
commentDeleteIcon
iframeComments
threadedCommentJs
例：<b:includable id='threadedCommentJs'/>
<b:includable id='threadedCommentJs'/>
元テンプレートのincludeタグにname='feedLinksがなく、動作しているか疑問ですが、一応feedLinksとfeedLinksBodyも置き換えました。
name='feedLinks
下記id名のv2のincludableタグを</b:widget>の直上に追加しました。
</b:widget>
後述する自動で追加されるincludableタグの処理を先に行うと、これらのincludableタグは自動で追加される。
id='main'内の<b:include data='post' name='comment_picker'/>を置き換え
<b:include data='post' name='comment_picker'/>
<b:include data='post' name='comment_picker'/> ↓ <b:include data='post' name='commentPicker'/>
v2に対応しているデータタグがない場合は、代替のデータタグを使用しています。
id='main'に1か所、id='post'に2か所
data:posts[i].dateHeader (Blog) Blogger Code PE
data:posts[i].date (Blog|FeaturedPost|PopularPosts) Blogger Code PE
2か所
data:posts[i].sharePostUrl (Blog) Blogger Code PE
data:posts[i].shareUrl (Blog|FeaturedPost|PopularPosts) Blogger Code PE
data:showPostLabels (Blog) Blogger Code PE
data:widgets[i].allBylineItems (Global) Blogger Code PE
data:postLabelsLabel (Blog) Blogger Code PE
data:widgets[i].allBylineItems[i].label (Global) Blogger Code PE
data:newerPageTitle (Blog) Blogger Code PE
data:messages.newerPosts (Global) Blogger Code PE
data:olderPageTitle (Blog) Blogger Code PE
data:messages.olderPosts (Global) Blogger Code PE
b:if書き換え
data:posts[i].labels[i].isLast (Blog) Blogger Code PE
data:posts[i].labels (Blog|FeaturedPost|PopularPosts) Blogger Code PE
<b:if cond='data:label.isLast == "true"'>を置き換える
<b:if cond='data:label.isLast == "true"'>
<b:if cond='data:label.isLast == "true"'> ↓ <b:if cond='data:post.labels.last == data:label'>
または、<b:if cond='data:post.labels.last.name != data:label.name'>に置き換え
<b:if cond='data:post.labels.last.name != data:label.name'>
参考サイト：BloggerのBlogウィジェットをバージョン2にする | バグ取りの日々
id='mrp'に1か所、id='shareButtons'で5か所
data:posts[i].canonicalUrl (Blog) Blogger Code PE
data:posts[i].url (Blog|FeaturedPost|PopularPosts) Blogger Code PE
QooQ listにはない
data:posts[i].firstImageUrl (Blog) Blogger Code PE
data:posts[i].featuredImage (Blog|FeaturedPost|PopularPosts) Blogger Code PE
投稿日の形式については記事後半に記載しました
id='main'に1か所、id='shareButtons'に5か所
id='status-message'のincludableタグと、
<b:include data='top' name='status-message'/>が下記と置き換え可能
<b:include data='top' name='status-message'/>
<b:includable id='noContentPlaceholder'> <b:if cond='data:posts.empty'> <div class='blog-posts hfeed container'> <div class='post-outer-container'> <b:if cond='data:view.isError'> <div class='status-msg-body'><data:navMessage/></div> <b:else/> <div class='no-posts-message'><b:eval expr='data:view.isSearch ? data:messages.noResultsFound : data:messages.theresNothingHere'/></div> </b:if> </div> </div> </b:if> </b:includable>
<b:include data='top' name='noContentPlaceholder'/>
data='top'はなくても動くっぽいです。
data='top'
status-message : Message d'état dans le gadget Blog (V1) Blogger Code PE
noContentPlaceholder : Message d'état de la page Blogger Code PE
v2にするとv2用のincludableタグが自動で追加されます。
そのままでも問題ないと思いますが、includableタグが中身のある状態で追加されると、コードの可読性や軽量化等、少し邪魔に感じます。
そこで、同じid名のincludableタグは上書きされないという性質をつかって、処理してみました。
【Blogger】b:includable タグの中身一括削除ツール | 水の中にはサメがいる！さんのツールをつかってv2のBlog widgetのincludableタグの中身を削除して閉じる。
今回使用しない判断をしたincludableタグを</b:widget>の直上にコピペ
データタグの置き換えでdata:post.dateHeaderをdata:post.dateに変更しました。
data:post.dateHeader
data:post.date
<p id='single-header-date'><data:post.date/></p>
<b:if cond='data:post.date'> <script type='text/javascript'>var jsdate = "<data:post.date/>"</script> </b:if>
自分の環境だけかもしれませんが、このままだと2022年9月1日のような年月日の順番で表示されません。
そこで<data:post.date/>を下記と置き換えました。（注）
<data:post.date/>
<p id='single-header-date'><data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日</p>
<b:if cond='data:post.date'> <script type='text/javascript'>var jsdate = "<data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日"</script> </b:if>
を呼び出すためのJavaScript
<script type='text/javascript'>document.write(jsdate)</script>
のdocument.writeは現在非推奨のようです：document.write() - Web APIs | MDN
document.write
そこで下記のコードは削除
下記コードを入れ替えで対応してみました。
変更前
<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
変更後
<p class='list-item-date'><data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日</p>
また、ゼロ付き（例：09月01日）の投稿日（と更新日）については下記サイトを参考にしてください。
b:widget-settingが違っていたので変更しました。
b:widget-setting
v1 <b:widget-setting name='authorLabel'>By</b:widget-setting>
v2 <b:widget-setting name='commentLabel'>comments</b:widget-setting>
threadedComments内の<b:include data='post' name='manageComments'/>
<b:include data='post' name='manageComments'/>
対応するincludableが見つからない
QooQはnextprevで前のリンクと新しいリンクを実装している
nextprev
<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> </div> <div class='clear'/> </b:includable>
v2のb:includableタグだとnextPageLink, previousPageLinkまたはpostPaginationあたり？
nextPageLink
previousPageLink
postPagination
id='main'内の下記コードは削除可能？
<b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if>
管理画面「レイアウト」のBlog widgetの設定と連携させるなら、id='commentsTitleのincludableタグを変更します。
id='commentsTitle
<b:includable id='commentsTitle'> <h3 class='title'><data:messages.comments/></h3> </b:includable>
<b:includable id='commentsTitle'> <h3 class='title'><data:post.numberOfComments/><data:allBylineItems.comments.label/></h3> </b:includable>
<data:widgets.Blog.first.allBylineItems.comments.label/>は、
<data:widgets.Blog.first.allBylineItems.comments.label/>
<data:allBylineItems.comments.label/>でも動く模様（理解不足です）
<data:allBylineItems.comments.label/>
Filtres de données universelles pour les options des articles - Blogger Code PE
Option : Les libellés associés à l'article - Blogger Code PE
Introduction : Les options des articles - Blogger Code PE
data:commentLabel (Blog) - Blogger Data Documentation - Blogger Code PE
また、こちらに変更するとBlog widgetの設定と関係なく「～件のコメント」の文字が出力され、コメントがない場合は「コメントなし」と出力されます。
<b:includable id='commentsTitle'> <h3 class='title'><b:message name='messages.numberOfComments'> <b:param expr:value='data:post.numberOfComments' name='numComments'/> </b:message></h3> </b:includable>
data:messages.numberOfComments (Global) Blogger Code PE
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
v2 化作業と詳細な記事の執筆お疲れ様です。
返信削除うちのオリジナルテーマ作成はほぼ行き当たりばったりの作業で、どこをどう弄ったか記憶が曖昧なので、色々思い出したり参考になりました(^^;
「○件のコメント」表示に関して、「件のコメント」はそのまま文字で入れてたので、多言語対応仕様にするべく、こちらの記事を参考にコードを入れ替えさせて頂きました。
一桁の投稿日・更新日にゼロを付ける方法ですが、JavaScript を使わず Blogger タグを使うやり方もありますのでご参考まで。
https://fujilogic.blogspot.com/2019/05/timestamp-format-customize.html#c3491760625113259663
>ふじやんさん
削除コメントありがとうございます。
お役に立てたようで何よりです。
自分は「記録しておかないと絶対に忘れる」確信があったので記事にしました。(笑)
Bloggerタグを使って一桁の投稿日・更新日にゼロを付ける方法をリンク先に追記しました。
ありがとうございます。